<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> -->
		<!-- 加载 Select2 -->
		<link href="./css/select2.main.css" rel="stylesheet" />
		<!-- 加载 Jquery -->
		<script src="./js/jq.js"></script>
		<!-- 加载 Select2 -->
		<script src="js/select2.main.js"></script>
		<style>
			.mySelect2 {
				width: 200px;
			}
		</style>
	</head>
	<body>

		<form action="#" id="myForm">
			<select id="mySelect" class="mySelect2" name="select1" multiple="multiple">
				<!-- <option value="">--单选--</option>
				<option value="5..">订单查询1</option>
				<option value="6..">订单导入2</option>
				<option value="7..">订单删除3</option>
				<option value="8..">订单撤销4</option> -->
			</select>

			<button id="myButton">点击</button>
		</form>
		<script>
			var data = [{
					id: 0,
					text: 'enhancement'
				},
				{
					id: 1,
					text: 'bug'
				},
				{
					id: 2,
					text: 'duplicate'
				},
				{
					id: 3,
					text: 'invalid'
				},
				{
					id: 4,
					text: 'wontfix'
				}
			];

			$("#mySelect").select2({
				width: "50%",
				placeholder: "--占位符--",
				// data: data,
				delay: 50000,
				// closeOnSelect: false,
				allowClear: true,
				// tags: true,
				// ajax:{
				// 	url:"http://127.0.0.1:8848/vue_test/json/test.json",
				// 	// url: function(params){
				// 	// 	console.log(params);	
				// 	// },
				// 	data:null,
				// 	processResults:function(data){
				// 		return {
				// 			results: data,
				// 			// "pagination": {
				// 			//     "more": true
				// 			//   }
				// 		}
				// 	}
				// }
				data: [{
						"id": 1,
						"text": "Option 1"
					},
					{
						"id": 2,
						"text": "Option 2",
						"selected": true
					},
					{
						"id": 3,
						"text": "Option 3",
						"disabled": true
					}
				],
			})
			// --------------====--------------

			var myselect = document.getElementById("mySelect");
			myselect.onchange = function() {
				var index = myselect.selectedIndex;
				var value = myselect.options[index].value;
				console.log(index, "---", value);
			}

			var myButton = document.getElementById("myButton");
			myButton.onclick = function() {

				// console.log(myselect.disabled = !myselect.disabled);
				// console.log(myselect.form);

				// myselect[3].selected = true;
				// console.log("---=----")
				// console.log(myselect[3])
				// console.log(myselect.options)
				// myselect.options[3].selected = true;

				myselect.options.selectedIndex = 2;
				// var value = myselect.options[index].value;
				var index = myselect.selectedIndex;
				var value = myselect.options[index].value;
				console.log(index, "--=--", value);
				console.log(myselect)
			}
		</script>
	</body>
</html>
